<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('百度ECharts')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                测试项：<select id="cid">
                                    <option th:each="tbTest:${tbTestList}" th:value="${tbTest.testItemNo}"
                                            th:text="${tbTest.testItemContent}"></option>
                                </select>
                            </li>
                            <li class="select-time">
                                <label>创建时间： </label>
                                <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="startTime"/>
                                <span>-</span>
                                <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="loadData()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="resetData()"><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-sm-12 select-table table-striped" style="height: 420px;">
        <div class="row" style="height: 100%;">
            <div class="col-sm-12" style="height: 100%;">
                <div class="ibox float-e-margins" style="height: 100%;">
                    <div class="ibox-content" style="height: 100%;">
                        <div class="echarts" id="echarts-bar-chart" style="height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script type="text/javascript">
    $(function () {
        loadData();
    });

    function loadData() {
        let testItemNo = $('#cid option:selected').val();
        let startTime = $("input[name='startTime']").val();
        let endTime = $("input[name='endTime']").val();
        // x轴: 部件名称
        var deviceNameArr = [];
        // 部件序列号
        var deviceSnArr = [];
        var deviceAndSnArr = [];
        // y轴: 测试值
        var testSubItemValueArr = [];
        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var data = {};
        var testTime = {
            "startTime": startTime,
            "endTime": endTime
        };
        data.testItemNo = testItemNo;
        data.params = testTime;
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "system/deviceAndTestSubItemValue/list",
            data: data,
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                if (data == null || data.rows == null) {
                    return;
                }
                for (let i = 0; i < data.rows.length; i++) {
                    deviceNameArr.push(data.rows[i].deviceName);
                    deviceSnArr.push(data.rows[i].deviceSn);
                    deviceAndSnArr.push(data.rows[i].deviceName + data.rows[i].deviceSn);
                    testSubItemValueArr.push(data.rows[i].testSubItemValue);
                }
                var baroption = {
                    title: {
                        text: '部件和测试值统计'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '17%',
                        containLabel: true
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            // data: deviceNameArr
                            data: deviceAndSnArr
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    dataZoom: [
                        {
                            type: 'slider',
                            show: true,
                            xAxisIndex: [0],
                            start: 0,
                            end: 50
                        }
                    ],
                    series: [
                        {
                            itemStyle: {normal: {color: '#4a6eff'}},
                            name: '部件名称',
                            type: 'bar',
                            data: deviceNameArr
                        },
                        {
                            itemStyle: {normal: {color: '#4a6eff'}},
                            name: '部件序列号',
                            type: 'bar',
                            data: deviceSnArr
                        },
                        {
                            itemStyle: {normal: {color: '#4a6eff'}},
                            name: '测试值',
                            type: 'bar',
                            data: testSubItemValueArr,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },

                    ],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        formatter: function (params) {
                            return '<p>部件名称: ' + params[0].value + '</p>' +
                                '<p>部件序列号: ' + params[1].value + '</p>' +
                                '<p>' + '测试值: ' + params[2].value + '</p>';
                        },
                    }
                };
                barChart.setOption(baroption);
                window.onresize = barChart.resize;
            }
        });
    }

    function resetData() {
        $.form.reset()
        loadData();
    }
</script>
</body>
</html>